<template>
  <div class="main">
    <div class="main-warpper">
      <h3 style="padding-bottom:15px;">完善资料</h3>
      <el-form ref="fromData" :model="fromData" :rules="infoRules" label-width="80px" size="mini"  label-position="left">
        <div class="form-warpper">
          <p class="form-title">基本信息</p>
          <div class="form-content">
            <el-form-item label="公司名称" prop="customerName">
              <el-input v-model="fromData.customerName" maxlength="15"></el-input>
            </el-form-item>
            <el-form-item label="所在地区" prop="area">
              <el-cascader
                clearable
                :options="areaData"
                v-model="fromData.area">
              </el-cascader>
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="fromData.address" maxlength="60" minlength="5"></el-input>
            </el-form-item>
            <el-form-item label="主营业务" prop="businessType" >
              <el-radio-group v-model="fromData.businessType">
                <el-radio label="1">茶行</el-radio>
                <el-radio label="2">烟酒行</el-radio>
                <el-radio label="3">茶馆</el-radio>
                <el-radio label="4">会所</el-radio>
                <el-radio label="5">其他</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
        <div class="form-warpper">
          <p class="form-title">联系方式</p>
          <div class="form-content">
            <el-form-item label="联系人" prop="contact">
              <el-input v-model="fromData.contact" maxlength="10"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="fromData.phone" disabled></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="form-warpper">
          <p class="form-title">资质信息 <span>（上传说明：仅支持png、JPG格式且大小在5M以内的单张照片）</span></p>
          <div class="form-content from-img">
              <!-- 营业执照照片 -->
              <div class="uploader-bar">
                <div class="single-uploader">
                  <el-upload
                    :action="$api + '/pcUtils/uploadFile'"
                    :show-file-list="false"
                    :on-success="uploadSuccessIdLicense"
                    :before-upload="beforeUpload"
                    accept="image/gif,image/jpeg,image/jpg,image/png">
                    <el-popover class="uploader-img" v-if="fromData.license" placement="right" width="40%" trigger="hover">
                      <a class="perview-img" target="_blank" :href="fromData.license"><img :src="fromData.license"></a>
                      <img :src="fromData.license" slot="reference">
                    </el-popover>
                    <i v-if="fromData.license" class="el-icon-circle-close btn-delete" @click.stop="delImg('fromData', 'license')"></i>
                    <i v-else class="el-icon-plus"></i>
                  </el-upload>
                </div>
                <p class="uploader-tip">营业执照</p>
              </div>
              <div class="uploader-bar">
                <!-- 身份证照片正面 -->
                <div class="single-uploader">
                  <el-upload
                    :action="$api + '/pcUtils/uploadFile'"
                    :show-file-list="false"
                    :on-success="uploadSuccessIdCard1"
                    :before-upload="beforeUpload"
                    accept="image/gif,image/jpeg,image/jpg,image/png">
                    <el-popover class="uploader-img" v-if="fromData.cardId01" placement="right" width="40%" trigger="hover">
                      <a class="perview-img" target="_blank" :href="fromData.cardId01"><img :src="fromData.cardId01"></a>
                      <img :src="fromData.cardId01" slot="reference">
                    </el-popover>
                    <i v-if="fromData.cardId01" class="el-icon-circle-close btn-delete" @click.stop="delImg('fromData', 'cardId01')"></i>
                    <i v-else class="el-icon-plus"></i>
                  </el-upload>
                  <p class="uploader-tip">正面</p>
                </div>
                <!-- 身份证照片反面 -->
                <div class="single-uploader">
                  <el-upload
                    :action="$api + '/pcUtils/uploadFile'"
                    :show-file-list="false"
                    :on-success="uploadSuccessIdCard2"
                    :before-upload="beforeUpload"
                    accept="image/gif,image/jpeg,image/jpg,image/png">
                    <el-popover class="uploader-img" v-if="fromData.cardId02" placement="right" width="40%" trigger="hover">
                      <a class="perview-img" target="_blank" :href="fromData.cardId02"><img :src="fromData.cardId02"></a>
                      <img :src="fromData.cardId02" slot="reference">
                    </el-popover>
                    <i v-if="fromData.cardId02" class="el-icon-circle-close btn-delete" @click.stop="delImg('fromData', 'cardId02')"></i>
                    <i v-else class="el-icon-plus"></i>
                  </el-upload>
                  <p class="uploader-tip">反面</p>
                </div>
              </div>
              <!-- 店铺照片 -->
              <div class="uploader-bar">
                <!-- 门头 -->
                <div class="single-uploader">
                  <el-upload
                    :action="$api + '/pcUtils/uploadFile'"
                    :show-file-list="false"
                    :on-success="uploadSuccessIdStorePhoto1"
                    :before-upload="beforeUpload"
                    accept="image/jpg,image/png">
                    <el-popover class="uploader-img" v-if="fromData.storePhoto01" placement="right" width="40%" trigger="hover">
                      <a class="perview-img" target="_blank" :href="fromData.storePhoto01"><img :src="fromData.storePhoto01"></a>
                      <img :src="fromData.storePhoto01" slot="reference">
                    </el-popover>
                    <i v-if="fromData.storePhoto01" class="el-icon-circle-close btn-delete" @click.stop="delImg('fromData', 'storePhoto01')"></i>
                    <i v-else class="el-icon-plus"></i>
                  </el-upload>
                  <p class="uploader-tip">门头</p>
                </div>
                <!-- 正面 -->
                <div class="single-uploader">
                  <el-upload
                    :action="$api + '/pcUtils/uploadFile'"
                    :show-file-list="false"
                    :on-success="uploadSuccessIdStorePhoto2"
                    :before-upload="beforeUpload"
                    accept="image/jpg,image/png">
                    <el-popover class="uploader-img" v-if="fromData.storePhoto02" placement="right" width="40%" trigger="hover">
                      <a class="perview-img" target="_blank" :href="fromData.storePhoto02"><img :src="fromData.storePhoto02"></a>
                      <img :src="fromData.storePhoto02" slot="reference">
                    </el-popover>
                    <i v-if="fromData.storePhoto02" class="el-icon-circle-close btn-delete" @click.stop="delImg('fromData', 'storePhoto02')"></i>
                    <i v-else class="el-icon-plus"></i>
                  </el-upload>
                  <p class="uploader-tip">1</p>
                </div>
                <!-- 左边 -->
                <div class="single-uploader">
                  <el-upload
                    :action="$api + '/pcUtils/uploadFile'"
                    :show-file-list="false"
                    :on-success="uploadSuccessIdStorePhoto3"
                    :before-upload="beforeUpload"
                    accept="image/jpg,image/png">
                    <el-popover class="uploader-img" v-if="fromData.storePhoto03" placement="right" width="40%" trigger="hover">
                      <a class="perview-img" target="_blank" :href="fromData.storePhoto03"><img :src="fromData.storePhoto03"></a>
                      <img :src="fromData.storePhoto03" slot="reference">
                    </el-popover>
                    <i v-if="fromData.storePhoto03" class="el-icon-circle-close btn-delete" @click.stop="delImg('fromData', 'storePhoto03')"></i>
                    <i v-else class="el-icon-plus"></i>
                  </el-upload>
                  <p class="uploader-tip">2</p>
                </div>
                <!-- 右边 -->
                <div class="single-uploader">
                  <el-upload
                    :action="$api + '/pcUtils/uploadFile'"
                    :show-file-list="false"
                    :on-success="uploadSuccessIdStorePhoto4"
                    :before-upload="beforeUpload"
                    accept="image/jpg,image/png">
                    <el-popover class="uploader-img" v-if="fromData.storePhoto04" placement="right" width="40%" trigger="hover">
                      <a class="perview-img" target="_blank" :href="fromData.storePhoto04"><img :src="fromData.storePhoto04"></a>
                      <img :src="fromData.storePhoto04" slot="reference">
                    </el-popover>
                    <i v-if="fromData.storePhoto04" class="el-icon-circle-close btn-delete" @click.stop="delImg('fromData', 'storePhoto04')"></i>
                    <i v-else class="el-icon-plus"></i>
                  </el-upload>
                  <p class="uploader-tip">3</p>
                </div>
              </div>
          </div>
        </div>
        <div class="info-sub">
          <el-button type="primary" @click="sub('fromData')">提交</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {infoRules} from '@/data/rules'
import area from '@/data/area.js'
export default {
  data () {
    return {
      fromData: {
        customerName: '',
        area: [],
        address: '',
        businessType: '',
        contact: '',
        phone: '',
        license: '', // 营业执照
        cardId01: '',
        cardId02: '',
        storePhoto01: '',
        storePhoto02: '',
        storePhoto03: '',
        storePhoto04: ''
      },
      infoRules: infoRules,
      areaData: area,
      infoList: []
    }
  },
  computed: {
    isCompleted () {
      if (this.fromData.cardId01 && this.fromData.cardId02 && this.fromData.license && this.fromData.storePhoto01 && this.fromData.storePhoto02 && this.fromData.storePhoto03 && this.fromData.storePhoto04) {
        return true
      } else {
        return false
      }
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      this.$http.post(this.$api + '/pc/customer/identifier', {}).then(res => {
        if (res.responseCode === '0000') {
          this.inforList = res.data
          this.fromData.customerName = res.data.customerName
          this.fromData.area.push(res.data.province)
          this.fromData.area.push(res.data.city)
          this.fromData.area.push(res.data.district)
          this.fromData.address = res.data.address
          this.fromData.businessType = res.data.businessType + ''
          this.fromData.contact = res.data.contact
          this.fromData.phone = res.data.mobile
          this.fromData.cardId01 = res.data.cardId01
          this.fromData.cardId02 = res.data.cardId02
          this.fromData.license = res.data.license
          this.fromData.storePhoto01 = res.data.storePhoto01
          this.fromData.storePhoto02 = res.data.storePhoto02
          this.fromData.storePhoto03 = res.data.storePhoto03
          this.fromData.storePhoto04 = res.data.storePhoto04
        }
      }).catch(() => {
        this.$message.error({
          message: '请求超时！'
        })
      })
    },
    sub (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.isCompleted) {
            let params = {
              'customerName': this.fromData.customerName,
              'province': this.fromData.area[0] || '',
              'city': this.fromData.area[1] || '',
              'district': this.fromData.area[2] || '',
              'address': this.fromData.address,
              'contact': this.fromData.contact,
              'mobile': this.fromData.phone,
              'businessType': this.fromData.businessType,
              'cardId01': this.fromData.cardId01,
              'cardId02': this.fromData.cardId02,
              'license': this.fromData.license,
              'storePhoto01': this.fromData.storePhoto01,
              'storePhoto02': this.fromData.storePhoto02,
              'storePhoto03': this.fromData.storePhoto03,
              'storePhoto04': this.fromData.storePhoto04
            }
            this.$http.post(this.$api + '/pc/customer/update', params).then(res => {
              if (res.responseCode === '0000') {
                this.$http.post(this.$api + '/pc/customer/identifier', {}).then(res => {
                  if (res.responseCode === '0000') {
                    this.$store.commit('user/setStatus', res.data.confirmStatus)
                    this.$router.push({
                      path: '/home'
                    })
                  }
                }).then(
                  this.$message({
                    message: res.responseMsg,
                    type: 'success'
                  })
                )
              } else {
                this.$message({
                  message: res.responseMsg,
                  type: 'error'
                })
              }
            })
          } else {
            this.$message({
              message: '请确保完整的图片信息！',
              type: 'error'
            })
          }
        } else {
          this.$message({
            message: '请填写完整信息！',
            type: 'error'
          })
          return false
        }
      })
    },
    uploadSuccessIdLicense (file, res) {
      this.fromData.license = file.data
    },
    uploadSuccessIdCard1 (file, res) {
      this.fromData.cardId01 = file.data
    },
    uploadSuccessIdCard2 (file, res) {
      this.fromData.cardId02 = file.data
    },
    uploadSuccessIdStorePhoto1 (file, res) {
      this.fromData.storePhoto01 = file.data
    },
    uploadSuccessIdStorePhoto2 (file, res) {
      this.fromData.storePhoto02 = file.data
    },
    uploadSuccessIdStorePhoto3 (file, res) {
      this.fromData.storePhoto03 = file.data
    },
    uploadSuccessIdStorePhoto4 (file, res) {
      this.fromData.storePhoto04 = file.data
    },
    // 检查图片大小不超过5M
    beforeUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      return isLt2M
    },
    delImg (val1, val2) {
      this[val1][val2] = ''
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
  .main{
    width: 100%;
    .main-warpper{
      width: 1200px;
      margin: 0 auto;
      padding: 45px 0 105px 0;
      font-size: $fz_14;
      .form-warpper{
        border: 1px solid $border_color;
        margin-bottom: 15px;
        .form-title{
          height: 35px;
          line-height: 35px;
          padding-left: 32px;
          font-weight: bold;
          border-bottom: 1px solid $border_color;
          background: $bg_title;
          position: relative;
          &::after{
            content: '';
            position: absolute;
            left: 20px;
            top: 0;
            width: 4px;
            height: 14px;
            margin-top: 10px;
            background: $green;
          }
          span {
            font-size: 12px;
            color: $f_normal;
            font-weight: normal;
          }
        }
        .form-content{
          background: #ffffff;
          padding: 25px 0 17px 20px;
        }
        .from-img{
          padding: 0;
        }
      }
    }
  }
  .el-form-item--mini .el-form-item__content, .el-form-item--mini .el-form-item__label, .el-input--mini, .el-input--mini .el-input__inner, .el-cascader .el-cascader--mini{
    width: 250px;
  }
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom: 20px;
  }
  .el-form-item__error{
    padding-top: 5px;
  }
  .uploader-tip{
    width: 100px;
    text-align: center;
    padding: 10px 0 0 0;
  }
  .info-sub{
    text-align: center;
    .el-button{
      margin:  0 auto;
      width: 128px;
      height: 36px;
      margin-top: 40px;
    }
  }
</style>
